<template>
  <div class="box" @click="OpenFeedbackDialog"></div>
  <n-modal v-model:show="showModal">
    <n-card
      footer-style="text-align:right"
      style="width: 700px; border-radius: 30px"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
      @close="
        () => {
          showModal = false;
        }
      "
      closable
    >
      <div class="title" style="text-align: center; font-size: 18px">
        您认为【智标宝】对您写作标书有帮助吗?
      </div>
      <NForm
        label-placement="top"
        label-width="100"
        require-mark-placement="left"
        size="large"
        style="margin-top: 15px"
        :model="feedbackForm"
        :rules="rules"
        ref="formRef"
      >
        <div class="btn-group">
          <div
            :class="['btn', active == 1 ? 'active' : '']"
            @click="changeBtn(1)"
          >
            <img
              class="btn-img"
              src="@/assets/bid-materials/yes-help.png"
              alt=""
            />
            <span class="text">有帮助</span>
          </div>
          <div
            :class="['btn', active == 0 ? 'active' : '']"
            @click="changeBtn(0)"
          >
            <img
              class="btn-img"
              src="@/assets/bid-materials/no-help.png"
              alt=""
            />
            <span class="text">无帮助</span>
          </div>
        </div>
        <NFormItem
          label="请问出了哪方面的问题？"
          required
          path="problemType"
          v-if="active == 0"
        >
          <n-checkbox-group v-model:value="feedbackForm.problemType">
            <n-space>
              <n-checkbox
                v-for="(key, idx) in problemTypeList"
                :value="key"
                :label="key"
              ></n-checkbox>
            </n-space>
          </n-checkbox-group>
        </NFormItem>

        <NFormItem
          label="请留下具体问题或建议"
          required
          path="problemContent"
          v-if="active == 0"
        >
          <n-input
            placeholder="感谢您的时间！你的反馈能帮助我们更好地改进产品与服务，提升更多用户的使用体验"
            v-model:value="feedbackForm.problemContent"
            type="textarea"
            :autosize="{
              minRows: 3,
            }"
          />
        </NFormItem>

        <NFormItem
          label="感谢反馈!请问还有其他建议吗？"
          path="fileLabel"
          v-if="active == 1"
        >
          <n-input
            placeholder="期待听到您的声音"
            v-model:value="feedbackForm.problemContent"
            type="textarea"
            :autosize="{
              minRows: 4,
            }"
          />
        </NFormItem>
      </NForm>
      <template #footer>
        <n-button
          secondary
          type="primary"
          size="large"
          @click="handleSubmit"
          :loading="btnLoading"
        >
          提 交
        </n-button></template
      >
    </n-card>
  </n-modal>
</template>

<script setup lang="ts">
import { NButton, useMessage } from "naive-ui";
import type { FormRules } from "naive-ui";
import { ref, onMounted } from "vue";
import { localStg } from "@/utils/storage";
import { USER_INFO } from "@/utils/const";
import type { FormInst } from "naive-ui";
import { SubmitFeedBack, getProblemType } from "@/service/api";

const message = useMessage();

const formRef = ref<HTMLElement & FormInst>();

const showModal = ref(false);

const active = ref(1);

const userInfo = localStg.get(USER_INFO);

const btnLoading = ref(false);

const problemTypeList = ref([]);

// 校验规则
const rules: FormRules = {
  problemContent: {
    required: true,
    message: "请输入",
    trigger: "blur",
  },
  problemType: {
    required: true,
    message: "请选择",
    type: "array",
    trigger: ["blur", "change"],
  },
};

const feedbackForm = ref({
  isHelp: 1,
  problemContent: "",
  problemType: [],
});

function OpenFeedbackDialog() {
  showModal.value = true;
  feedbackForm.value = {
    isHelp: 1,
    problemContent: "",
    problemType: [],
  };
  active.value = 1;
  getProblemTypeList();
}

// 提交
async function handleSubmit() {
  console.log(feedbackForm.value);
  await formRef.value?.validate(async (errors: any) => {
    if (!errors) {
      btnLoading.value = true;
      let tmp = {
        moduleId: localStg.get("moduleId") || 1,
        applicationId: 1,
        tenantId: userInfo!.user.tenantId,
        isHelp: feedbackForm.value.isHelp,
        problemContent: feedbackForm.value.problemContent,
        problemType: feedbackForm.value.problemType.join(","),
      };
      const { data, error } = await SubmitFeedBack(tmp);
      if (!error) {
        showModal.value = false;
        window.$message?.success("您已提交成功，感谢您的帮助与支持!");
        btnLoading.value = false;
      } else {
        btnLoading.value = false;
      }
    }
  });
}

function changeBtn(value: any) {
  active.value = value;
  feedbackForm.value.isHelp = value;
  feedbackForm.value.problemContent = "";
  feedbackForm.value.problemType = [];
}

// 获取问题类型
async function getProblemTypeList() {
  const { data, error } = await getProblemType({
    moduleId: localStg.get("moduleId") || 1,
  });
  if (!error) {
    problemTypeList.value = data;
  }
}
</script>

<style lang="scss">
.box {
  width: 117px;
  height: 60px;
  position: absolute;
  top: 650px;
  z-index: 999;
  background-image: url("@/assets/bid-materials/feedback-close.png");
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.2s ease;
  transition-delay: 150ms;
  &:hover {
    background-image: url("@/assets/bid-materials/feedback-open.png");
    width: 117px;
    cursor: pointer;
  }
}
.btn-group {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  margin-bottom: 15px;
  .btn {
    padding: 8px 20px;
    border-radius: 20px;
    background-color: #dedcdc;
    margin: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .btn-img {
      height: 18px;
      width: 18px;
    }
    .text {
      margin-left: 5px;
      color: white;
      font-size: 14px;
    }
  }
  .active {
    background-color: #836fff;
  }
}
</style>
